<template>
  <div class="advance-order-page">
    <a-spin :spinning="btnLoading">
      <div class="customer-wrapper">
        <label for="#">
          <span>*</span>
          客户：
        </label>
        <a-select v-model:value="formState.customerId" show-search :filter-option="filterOption" style="width: 480px" placeholder="请选择客户" @change="changeCustomerHandle">
          <a-select-option v-for="item in customerOpts" :label="item.shortName" :key="item.id" :value="item.id">{{ item.shortName }}</a-select-option>
        </a-select>
      </div>
      <a-radio-group v-model:value="formState.shippingMethod" button-style="solid">
        <a-radio-button :value="0">上门取件</a-radio-button>
        <a-radio-button :value="1">自送入仓</a-radio-button>
      </a-radio-group>
      <!-- 寄件信息 -->
      <a-form class="mail-info" ref="formDataRef" :model="formState" name="basic" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }" autocomplete="off">
        <div class="form-title">寄件信息</div>
        <a-row :gutter="16">
          <template v-if="formState.shippingMethod === 0">
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="6" :xxxl="6">
              <a-form-item label="取件地址" name="pickupAddressId" :rules="[{ required: true, message: '请选择取件地址!' }]">
                <a-button type="link" @click="chooseAddressHandle">{{ formState.pickupAddressId ? "更改地址" : "选择地址" }}</a-button>
                <div v-if="formState.pickupAddressId" class="ellipsis-info">{{ formState.pickupAddress }}</div>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="6" :xxxl="6">
              <a-form-item label="期望取件时间" name="expectedPickupTime" :rules="[{ required: true, message: '请选择期望取件时间!' }]">
                <a-date-picker v-model:value="formState.expectedPickupTime" show-time format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" />
              </a-form-item>
            </a-col>
          </template>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="6" :xxxl="6" v-else>
            <a-form-item label="仓库地址" name="warehouseId" :rules="[{ required: true, message: '请选择仓库地址!' }]">
              <a-button type="link" @click="chooseWarehouseHandle">{{ formState.warehouseId ? "更改仓库" : "选择仓库" }}</a-button>
              <div v-if="formState.warehouseId" class="ellipsis-info">{{ formState.warehouseName }}</div>
            </a-form-item>
          </a-col>
        </a-row>
        <div class="form-title">
          物品信息
          <span class="tip">（预报下单多个运单时，请填写合计数据）</span>
        </div>
        <a-row :gutter="16">
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="6" :xxxl="6">
            <a-form-item label="预估重量" name="estimatedWeight">
              <a-input-number style="width: 170px; margin-right: 8px" v-model:value="formState.estimatedWeight" :min="0" :max="99999.99" :precision="2" placeholder="请输入"></a-input-number> KG
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="6" :xxxl="6">
            <a-form-item label="预估体积" name="estimatedVolume">
              <a-input-number style="width: 170px; margin-right: 8px" v-model:value="formState.estimatedVolume" :min="0" :max="99999.99" :precision="2" placeholder="请输入"></a-input-number> m³
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <a-form
        class="waybill-info"
        ref="waybillDataRef"
        :model="formState"
        layout="vertical"
        name="basic"
        :label-col="{ style: 'width:110px' }"
        :wrapper-col="{ style: 'calc(100% - 110px)' }"
        autocomplete="off"
      >
        <div class="form-title">
          <div>运单信息</div>
          <div style="padding: 12px 0">
            <span style="margin-right: 16px">合计件数：{{ totalItemNumber }}</span
            ><span>合计运单数： {{ (formState.bizPreOrderShipmentReqDtoList as []).length }}</span>
          </div>
        </div>
        <a-row :gutter="16">
          <template v-for="(item, index) in formState.bizPreOrderShipmentReqDtoList" :key="index">
            <a-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" :xxl="4" :xxxl="4">
              <a-form-item label="件数" :name="['bizPreOrderShipmentReqDtoList', index, 'itemNumber']" :rules="[{ required: true, message: '请填写件数!' }]">
                <a-input-number v-model:value="item.itemNumber" :min="1" :max="9999" :precision="0" placeholder="请输入"></a-input-number>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" :xxl="4" :xxxl="4">
              <a-form-item label="国家或地区" :name="['bizPreOrderShipmentReqDtoList', index, 'countryRegionId']" :rules="[{ required: true, message: '请选择国家或地区!' }]">
                <a-select v-model:value="item.countryRegionId" placeholder="请选择" @change="changeCountryHandle($event, item)">
                  <a-select-option v-for="(item, index) in countryOpts" :key="index" :value="item.id">{{ item.region }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" :xxl="4" :xxxl="4">
              <a-form-item label="仓库代码" :name="['bizPreOrderShipmentReqDtoList', index, 'warehouseCode']" :rules="[{ required: true, message: '请选择仓库代码!' }]">
                <a-cascader
                  v-model:value="item.warehouseCode"
                  :fieldNames="{ label: 'warehouseCode', value: 'warehouseCode', children: 'bizWarehouseCodeManageList' }"
                  showSearch
                  :options="(item as any).warehouseCodeOpts "
                  placeholder="请选择"
                  @change="changeChannelHandle($event, item)"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" :xxl="4" :xxxl="4">
              <a-form-item label="渠道" :name="['bizPreOrderShipmentReqDtoList', index, 'channelId']" :rules="[{ required: true, message: '请选择渠道!' }]">
                <a-cascader v-model:value="item.channelId" showSearch :options="(item as any).channelOpts " placeholder="请选择" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" :xxl="4" :xxxl="4">
              <a-form-item label="备注" :name="['bizPreOrderShipmentReqDtoList', index, 'remark']" :rules="[{ required: false, message: '请填写备注!' }]">
                <a-input v-model:value="item.remark" placeholder="请输入" :maxlength="200" allowClear></a-input>
              </a-form-item>
            </a-col>
            <!-- <a-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" :xxl="4" :xxxl="3">
              <a-form-item label="品名" :name="['bizPreOrderShipmentReqDtoList', index, 'productName']" :rules="[{ required: true, message: '请填写品名!' }]">
                <a-input v-model:value="item.productName" placeholder="请输入" :maxlength="50" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" :xxl="4" :xxxl="4">
              <a-form-item label="材质" :name="['bizPreOrderShipmentReqDtoList', index, 'materialQualityId']" :rules="[{ required: true, message: '请填写品名!' }]">
                <a-select v-model:value="item.materialQualityId" mode="multiple" allowClear :max-tag-count="1" :filter-option="filterOption" @change="changeMaterialHandle(item)" placeholder="请选择">
                  <a-select-option v-for="(item, index) in materialOpts" :key="index" :value="item.id" :label="item.material">{{ item.material }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
            <!-- <a-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" :xxl="2" :xxxl="2">
              <a-form-item label="购买保险" :name="['bizPreOrderShipmentReqDtoList', index, 'purchaseInsurance']">
                <a-checkbox v-model:checked="item.purchaseInsurance">购买保险</a-checkbox>
              </a-form-item>
            </a-col> -->
            <a-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3" :xxl="2" :xxxl="2">
              <a-form-item label=" ">
                <div class="operation-btn">
                  <a-button @click="addHandle" style="margin-right: 8px" type="primary"><plus-outlined /></a-button>
                  <a-button @click="deleteHandle(index)" v-if="(formState.bizPreOrderShipmentReqDtoList as []).length > 1" type="primary" danger><minus-outlined /></a-button>
                </div>
              </a-form-item>
            </a-col>
          </template>
        </a-row>
        <div class="form-title">预报图片（最多上传9张）</div>
        <a-form-item label=" " name="bizSysFilesReqDtoList">
          <CustomerUploadFile mode="/parent/" v-model:value="formState.bizSysFilesReqDtoList" valueType="2" :maxCount="9" list-type="picture-card">
            <plus-outlined></plus-outlined>
          </CustomerUploadFile>
        </a-form-item>
      </a-form>
    </a-spin>
    <div class="submit-btn">
      <a-button v-debounce type="primary" @click="submitHandle" :loading="btnLoading">确认下单</a-button>
      <a-button @click="cancelHandle" :loading="btnLoading">重置</a-button>
    </div>
    <!-- 抽屉 -->
    <a-drawer v-model:visible="drawerOpts.visible" :title="drawerOpts.title" :maskClosable="false" :closable="true" :width="drawerOpts.width" placement="right">
      <component v-model:visible="drawerOpts.visible" :is="drawerOpts.component" :type="drawerOpts.type" :pass-data="drawerOpts.passData" @submit="drawerSubmitHandle"></component>
    </a-drawer>
    <SubmitTipModal v-model:visible="submitTipFlag" :pass-data="formState" @keep-order="keepOrderHandle" @go-pre-order="goPreOrderHandle"></SubmitTipModal>
  </div>
</template>
<script lang="ts">
import ChooseAddress from "./components/chooseAddress/index.vue";
import ChooseWarehouse from "./components/chooseWarehouse/index.vue";
import SubmitTipModal from "./components/submitTipModal/index.vue";
import CustomerUploadFile from "@/components/customerUploadFile/index.vue";
export default {
  name: "AdvanceOrder",
  components: {
    ChooseAddress,
    ChooseWarehouse,
    SubmitTipModal
  }
};
</script>
<script lang="ts" setup>
import { PlusOutlined, MinusOutlined } from "@ant-design/icons-vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const {
  btnLoading,
  drawerOpts,
  formState,
  waybillDataRef,
  formDataRef,
  countryOpts,
  getAllCountryOpts,
  getChannelOpts,
  materialOpts,
  getAllMaterialOpts,
  totalItemNumber,
  submitTipFlag,
  customerOpts,
  getAllCustomerOpts,
  getAllWarehouseCodeOpts,
  getCoumsterChannelByCountry,
  customerId
} = InitHook();
const {
  changeCountryHandle,
  addHandle,
  deleteHandle,
  submitHandle,
  cancelHandle,
  chooseAddressHandle,
  drawerSubmitHandle,
  chooseWarehouseHandle,
  // changeMaterialHandle,
  keepOrderHandle,
  changeCustomerHandle,
  filterOption,
  goPreOrderHandle,
  changeChannelHandle
} = OperationHook({
  getChannelOpts,
  getAllWarehouseCodeOpts,
  formState,
  waybillDataRef,
  formDataRef,
  drawerOpts,
  btnLoading,
  totalItemNumber,
  materialOpts,
  submitTipFlag,
  getCoumsterChannelByCountry,
  customerId
});
getAllCountryOpts();
getAllMaterialOpts();
getAllCustomerOpts();
</script>
<style lang="stylus" scoped>
.advance-order-page {
  background-color: #fff;
  padding: 24px;
  height: calc(100vh - 130px);
  overflow-y: auto;
  .mail-info {
    padding-top: 12px;
    .form-title {
      font-weight: 600;
      padding-bottom: 12px;
      .tip {
        color: #ccc;
      }
    }
    .ellipsis-info {
      width: 100%;
      overflow: hiddden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .waybill-info {
    padding-bottom: 12px;
    .form-title {
      font-weight: 600;
      .tip {
        color: #ccc;
      }
    }
    :deep(.ant-input-number) {
      width: 100%;
    }
  }
  .customer-wrapper {
    margin-bottom: 12px;
    > label {
      font-weight: 600;
      > span {
        color: red;
      }
    }
  }
  .submit-btn {
    position: absolute;
    bottom: 48px;
    left: 0;
    width: 100%;
    text-align: center;
    :deep(.ant-btn) {
      margin-right: 16px;
    }
  }
  .operation-btn {
    white-space: nowrap;
  }
}
</style>
